<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="vue.js"></script>
    <title>Title</title>
</head>
<body>
<div id="app">
    <ul id="example-1">
        <li v-for="item in items">
            {{ item.message }}
        </li>
    </ul>

    <ul id="example-2">
        <li v-for="(item, index) in items">
            {{ parentMessage }} - {{ index }} - {{ item.message }}
        </li>
    </ul>

    <div v-for="item of items"></div>

    <ul id="v-for-object">
        <li v-for="value in object">
            {{ value }}
        </li>
    </ul>

    <div v-for="(value, key) in object">
        {{ key }}: {{ value }}
    </div>

    <div v-for="(value, key, index) in object">
        {{ index }}. {{ key }}: {{ value }}
    </div>

    <li v-for="n in evenNumbers">{{ n }}</li>
    <li v-for="n in even(numbers)">{{ n }}</li>

    <div>
        <span v-for="n in 10">{{ n }} </span>
    </div>

    <ul>
        <template v-for="item in items">
            <li>{{ item.message }}</li>
            <li class="divider"></li>
        </template>
    </ul>
</div>
</body>
</html>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            parentMessage: 'Parent',
            items: [
                { message: 'Foo' },
                { message: 'Bar' }
            ],
            object: {
                firstName: 'John',
                lastName: 'Doe',
                age: 30
            },
            numbers: [ 1, 2, 3, 4, 5 ]
        },
        computed: {
            evenNumbers: function () {
                return this.numbers.filter(function (number) {
                    return number % 2 === 0
                });
            }
        },
        methods: {
            even: function (numbers) {
                return numbers.filter(function (number) {
                    return number % 2 === 0
                });
            }
        }
    });
    var index = 0;
    app.items[index] = 'new value';//不能检测到，可以使用 app.items.splice(indexOfItem, 1, newValue)
    app.b = 'b';//不能检测到，可以使用 Vue.set(object, key, value) (同vm.$set)
</script>